<template>
	<div class="login">
		<div class="top-box">
			<!-- <image src="../../static/image/title-top.png"></image> -->
			<img src="../../static/image/title-top.png" />
		</div>
		<div class="center-box">
			<div class="center-box-item">
				<div class="center-box-item-img">
					<img src="../../static/image/title-login.png" />
				</div>

			</div>
			<el-form :model="loginForm">
				<el-form-item>
					<div class="center-box-item">
						<el-input v-model="loginForm.userName" placeholder="用户账号"></el-input>
					</div>
				</el-form-item>
				<el-form-item>
					<div class="center-box-item">
						<el-input v-model="loginForm.password" placeholder="用户密码"></el-input>
					</div>
				</el-form-item>
				<el-form-item>
					<div class="center-box-item-code">
						<div class="center-box-item-code-item">
							<el-input v-model="loginForm.code" placeholder="验证码"></el-input>
						</div>
						<div class="center-box-item-code-item get-code">
							获取验证码
						</div>
					</div>
				</el-form-item>
			</el-form>
			<div class="center-box-item-button">
				<el-button type="primary">确认登录</el-button>
			</div>
		</div>
		<div class="bottom-box">
			<div class="company-name">版权所有：上海山巅智能科技有限公司</div>
			<div class="copyright">Copyright Owner：Shanghai Sdawn Intelligent Technology Co , Ltd</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				loginForm:{
					userName: "",
					password: "",
					code: '',
				}
			}
		},
		name: "Login",
	}
</script>

<style lang="scss" scoped>
	.login {
		width: 100%;
		height: 100%;
		background: url("../../static/image/bg.png");
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		min-width: 1000px;
		zoom: 1;
		background-color: #fff;
		background-repeat: no-repeat;
		background-size: cover;
		-webkit-background-size: cover;
		-o-background-size: cover;
		background-position: center 0;
		color: #FFFFFF;
		.top-box {
			padding: 140rpx 0 0 120rpx;
		}
		.center-box {
			color: #808080;
			border-radius: 12px;
			margin: 140rpx auto 0;
			width: 760rpx;
			height: 680rpx;
			background-color: #fff;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 0 60rpx;
            .el-form-item {
                 margin-bottom: 0px; 
            }
			.center-box-item {
				padding-bottom: 40rpx;
				::v-deep {
					.el-input {
						.el-input__inner {
							background: #F7F8F8;
							border: none;
							height: 96rpx;
							width: 640rpx;
							color: #AAAAAA;
							font-size: 32rpx;
							letter-spacing: 0.72px;
						}

					}
				}

				.center-box-item-img {
					margin-top: -20rpx;
					
				}
			}

			.center-box-item-button {
				padding-bottom: 60rpx;

				::v-deep .el-button {
					height: 96rpx;
					width: 640rpx;
					font-size: 36rpx;
					letter-spacing: 0.8rpx;
				}
			}

			.center-box-item-code {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 40rpx;

				::v-deep {
					.el-input {
						.el-input__inner {
							font-size: 32rpx;
							background: #F7F8F8;
							border: none;
							height: 96rpx;
							width: 400rpx;
							color: #AAAAAA;
							letter-spacing: 0.72px;
						}

					}
				}

				.get-code {
					line-height: 96rpx;
					width: 220rpx;
					color: #44B8C2;
					letter-spacing: 0.72px;
					font-size: 32rpx;
					border-radius: 6px;
					background-color: #DCF4F6;
				}

				.center-box-item-code-item {
					height: 96rpx;
				}
			}
		}

		.bottom-box {
			position: fixed;
			bottom: 60rpx;
			margin-left: 50%;
			transform: translate(-50%, -50%);
			color: #FFFFFF;

			.company-name {
				font-size: 44rpx;
				margin-bottom: 20rpx;
				font-family: PingFangSC-Regular;
			}

			.copyright {
				font-size: 24rpx;
				font-family: PingFangSC-Regular;
			}
		}
	}
</style>
